<template>
    <div>
        <div id="top11">
            <!-- 最顶端部分 -->
            <v-header title="我的" :back="true"></v-header>
            <!-- 头像部分 -->
            <div id="touxiang">
                <div class="d1">
                    <img :src='require("../../assets/images/wode.jpg")' alt="">
                </div>
                <div class="d2">
                    <p>代用名</p>
                    <i>完善资料让小U更懂您</i>
                </div>
                <div class="d3">
                    <img src="images/wode1.jpg" alt="">
                </div>
            </div>

            <!-- 头像下面部分 -->
            <div id="shoucang">
                <p>
                    <span>12</span>
                    <i>我的收藏</i>
                </p>
                <p>
                    <span>12</span>
                    <i>浏览记录</i>
                </p>
                <p>
                    <span>￥0</span>
                    <i>我的红包</i>
                </p>
                <p>
                    <span>12</span>
                    <i>优惠券</i>
                </p>
            </div>
        </div>
                <!-- 我的订单部分 -->
        <div id="dingdan">
            <div class="wode1">
                <p>我的订单</p>
                <span class="iconfont">全部订单&#xe601;</span>
            </div>
            <div class="dingdan1">
                <p>
                    <img :src='require("../../assets/images/wode11 (1).jpg")' alt="">
                    <i>代付款</i>
                </p>
                <p>
                    <img :src='require("../../assets/images/wode11 (1).jpg")' alt="">
                    <i>代收货</i>
                </p>
                <p>
                    <img :src='require("../../assets/images/wode11 (1).jpg")' alt="">
                    <i>&nbsp;评价</i>
                </p>
                <p>
                    <img :src='require("../../assets/images/wode11 (1).jpg")' alt="">
                    <i>售后/退款</i>
                </p>
            </div>
        </div>

        <!-- 地址部分 -->
        <div id="dizhi">
            <div class="dizhi1">
                <div class="dizhi11">
                    <span class="iconfont">&#xe613;</span>
                    <p>地址管理</p>
                </div>
                <div>
                    <span class="iconfont">&#xe601;
                    </span>
                </div>
            </div>
            <div class="dizhi2">
                <div class="dizhi22">
                    <span class="iconfont">&#xe613;</span>
                    <p>我的钱包</p>
                </div>
                <div class="dizhi222">
                    <p>剩余200U币</p>
                    <span class="iconfont">&#xe601;
                    </span>
                </div>
            </div>
            <div class="dizhi1">
                <div class="dizhi11">
                    <span class="iconfont">&#xe646;</span>
                    <p>我的二维码</p>
                </div>
                <div>
                    <span class="iconfont">&#xe601;
                    </span>
                </div>
            </div>
            <div class="dizhi1">
                <div class="dizhi11">
                    <span class="iconfont">&#xe61d;</span>
                    <p>我的小伙伴</p>
                </div>
                <div>
                    <span class="iconfont">&#xe601;
                    </span>
                </div>
            </div>
            <div class="dizhi1">
                <div class="dizhi11">
                    <span class="iconfont">&#xe653;</span>
                    <p>0元试用</p>
                </div>
                <div>
                    <span class="iconfont">&#xe601;
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>

#top11 {
  background: linear-gradient(#ff6040, #ff7763);
  height: 5.5rem;
}
/*头像部分*/
#touxiang {
  display: flex;
  justify-content: space-between;
  padding-left: 0.2rem;
  height: 1.28rem;
}
#touxiang .d1 img {
  width: 1.28rem;
}
#touxiang .d2 {
  margin-left: -1.2rem;
}
#touxiang .d2 p {
  font-size: 0.34rem;
  color: #fff;
  margin-bottom: 0.2rem;
  margin-top: 0.1rem;
}
#touxiang .d2 i {
  padding: 0.05rem;
  border: 2px solid #ffb4a7;
  border-radius: 0.05rem;
  color: #fff;
}
#touxiang .d3 img {
  width: 1.53rem;
  margin-top: 0.4rem;
}
/*头像下面部分*/
#shoucang {
  display: flex;
  justify-content: space-around;
  height: 1.18rem;
}
#shoucang p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#shoucang p span {
  font-size: 0.3rem;
  color: #fff;
  font-weight: bold;
}
#shoucang p i {
  color: #fff;
  font-size: 0.18rem;
}
/*我的订单 部分*/
#dingdan {
  width: 6.7rem;
  height: 2.06rem;
  padding: 0.2rem;
  background: #fff;
  margin: 0 auto;
  border-radius: 0.15rem;
  position: absolute;
  top: 4rem;
  left: .2rem;
}
#dingdan .wode1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
#dingdan .wode1 P {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#dingdan .wode1 span {
  font-size: 0.22rem;
  color: #ff6040;
}
#dingdan .dingdan1 {
  display: flex;
  justify-content: space-around;
}
#dingdan .dingdan1 img {
  width: 0.6rem;
  margin-bottom: 0.2rem;
  margin: 0.2rem auto;
}
#dingdan .dingdan1 i {
  font-size: 0.2rem;
  color: #333;
}
/*地址部分*/
#dizhi {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
#dizhi .dizhi1 {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  background: #fff;
  height: 0.6rem;
  line-height: 0.6rem;
}
#dizhi .dizhi1 .dizhi11 {
  display: flex;
}
#dizhi .dizhi1 .dizhi11 span {
  font-size: 0.32rem;
  color: #ff6040;
  margin-right: 0.1rem;
}
#dizhi .dizhi1 .dizhi11 p {
  font-size: 0.24rem;
  color: #333;
  font-weight: bold;
}
#dizhi .dizhi2 {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  background: #fff;
  height: 0.6rem;
  line-height: 0.6rem;
}
#dizhi .dizhi2 .dizhi22 {
  display: flex;
}
#dizhi .dizhi2 .dizhi22 span {
  font-size: 0.32rem;
  color: #ff6040;
  margin-right: 0.1rem;
}
#dizhi .dizhi2 .dizhi22 p {
  font-size: 0.24rem;
  color: #333;
  font-weight: bold;
}
#dizhi .dizhi2 .dizhi222 {
  display: flex;
}
#dizhi .dizhi2 .dizhi222 p {
  color: #757575;
  font-size: 0.22rem;
}
/*底部内容*/
#dibu {
  height: 1.8rem;
  width: 7.5rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
}
#dibu .top1 ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  margin-top: 0.2rem;
}
#dibu .top1 ul li {
  width: 1.8rem;
  text-align: center;
}
#dibu .top1 ul .iconfont {
  font-size: 0.4rem;
  color: #999;
}
#dibu .top1 ul p {
  font-size: 0.1rem;
  color: #a2a2a2;
}
#dibu .top1 ul .li1 span {
  color: #ff6040;
}
#dibu .top1 ul .li1 p {
  color: #ff6040;
}
#dibu .bottom1 {
  display: flex;
  height: 0.7rem;
  align-items: flex-end;
  justify-content: center;
}
#dibu .bottom1 p {
  width: 2.68rem;
  height: 0.1rem;
  background: #000;
  border-radius: 0.2rem;
}

</style>